import React, { useEffect, useState } from 'react';
import { Tag } from 'antd';
import service from '../../../services/index'
import { LeftCircleTwoTone } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import { Button } from 'antd';
import AbsentTable from '../../../compoennts/studentAbsent/AbsentTable';
const columns = [
  {
    title: '序号',
    dataIndex: 'id',
    key: 'id',
  
  },
  {
    title: '年级班级',
    dataIndex: 'className',
     key:'className'
  },
  {
    title: '学生姓名',
    dataIndex: 'student_name',
    key:'student_name'
  },
  {
    title: '性别',
    dataIndex: 'sex',
    key:'sex'
},
{
  title: '学籍号',
  dataIndex: 'sid',
  key:'sid'
},
  {
    title: '今日考勤状态',
        dataIndex: 'state',
        key:'state',
    render: (_, { state }) => (
      <>
            <Tag color={state==1?"green":"red"} key={state}>
              {state==1?"正常":"迟到"}
            </Tag>
      </>
    ),
  },
  {
    title: '电话号码',
    dataIndex: 'tel',
    key:'tel'
},
  
];
function Clocking(_props) {
  const [data, setData] = useState([]);
  useEffect(() => {
    //获取请假学生列表的函数
    const getCallList = async () => {
        let result = await service.CallService.getAllCall()
        console.log(result.data)
        setData(result.data)
    }
    getCallList()
}, [JSON.stringify(data)])
 const navigate = useNavigate()


    //发考勤左边的按钮或者取消按钮触发，回退到考勤管理页面
    const handleBack = () => {
        navigate(-1)
    }
    const handlePublish = () => {
        console.log(toWho, radioValues)
    }
    return (
      <div className='voteInput'>
      <div className='topNav'>
          <div><LeftCircleTwoTone onClick={handleBack} style={{ fontSize: '20px', cursor: 'pointer' }} /><span>考勤确认</span></div>
          <div>
              <Button type='default' onClick={handleBack} >返回</Button>
              <Button type='primary' onClick={handlePublish}>发布</Button>
          </div>
      </div>
      <div>
          <span>考勤日期:2022-12-20</span>
         <span style={{float:'right'}}>
         <span>应到:3</span>
          <span>实到:2</span>
         </span>
         
      </div>
      <AbsentTable columns={columns} data={data} rowKey={record => record.id}>
            </AbsentTable>
  </div>
    )
  }

  export default Clocking;